<template>
  <!--  <el-container>

    <el-steps :space="400" :align-center="true" :active="currentStep" finish-status="success">
      <el-step title="扫码登陆"></el-step>
      <el-step title="获取体验二维码"></el-step>
      <el-step title="上传小程序"></el-step>
    </el-steps>


    <el-row v-if="currentStep == 1">
      <img :src="loginQrCode" alt="" class="qrCode" v-if="currentStep == 1 && loginQrCode != ''">
      <el-button size="small" @click="getLoginQrCode">获取登陆二维码</el-button>
    </el-row>

    <el-row v-if="currentStep == 2">
      <el-form label-width="120px" label-position="left" size="small" :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="跳转小程序appid">
          <el-input type="textarea" :rows="10" v-model="ruleForm.appidText" placeholder="请输入需要跳转小程序的ID"></el-input>
          <div class="form-item-tip">
            <span>提示：每一行一个appid，最多只可添加10个,以下面标签显示为准（未填写情况会标识为空字符）</span>
          </div>
          <div>
            <el-tag
              v-for="appidItem in json_content">
              {{appidItem ? appidItem : '请填写'}}
            </el-tag>
          </div>
        </el-form-item>
      </el-form>
      <img :src="testQrCode" alt="" class="qrCode" v-if="currentStep == 2 && testQrCode != ''">
      <el-button size="small" @click="getTestQrCode" v-if="currentStep == 2 && testQrCode == ''">获取体验二维码</el-button>
      <el-button size="small" @click="nextStep" v-if="currentStep == 2 && testQrCode != ''">下一步</el-button>
    </el-row>

    <el-row v-if="currentStep == 3">
      <el-form label-width="80px" label-position="left" size="small" :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="版本号" prop="version">
          <el-input v-model="ruleForm.version" placeholder="请输入你的版本号"></el-input>
          <div class="form-item-tip">
            <span>提示：版本号：1.0</span>
          </div>
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入你的版本号"></el-input>
        </el-form-item>
      </el-form>
      <el-button size="small" @click="prevStep">上一步</el-button>
      <el-button type="primary" @click="submitApplet('ruleForm')" size="small">立即上传</el-button>
    </el-row>

  </el-container> -->
  <el-container v-loading="loading">
    <el-steps :space="400" :align-center="true" :active="currentStep" finish-status="success">
      <el-step title="获取登录二维码"></el-step>
      <el-step title="扫码登录"></el-step>
      <el-step title="上传小程序"></el-step>
    </el-steps>
    <div id="qrcode" class="qr_code" v-if="currentStep != 3"></div> <!-- 创建一个div，并设置id为qrcode -->
    <el-row v-if="currentStep == 1">
        <el-form label-width="80px" label-position="left" size="small" :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item label="版本号" prop="version">
            <el-input v-model="ruleForm.version" placeholder="请输入你的版本号"></el-input>
            <div class="form-item-tip">
              <span>提示：版本号：1.0</span>
            </div>
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc" placeholder="请描述此次上传内容"></el-input>
          </el-form-item>
        </el-form>
      <el-button size="small" @click="getLoginQrCode">获取登陆二维码</el-button>
    </el-row>
    <el-row v-if="currentStep == 2" style="margin-top: 20px;">
      <el-button type="primary" @click="submitApplet()" size="small">请扫描二维码并立即上传</el-button>
    </el-row>
    <el-row v-if="currentStep == 3">
      <div class="title" style="margin: 20px 0;text-align: center; font-weight: bold;">上传代码成功，请到微信开发平台小程序后台预览，提交审核应用</div>
      <div class="title" style="margin: 20px 0;text-align: center;">微信开发平台小程序后台 <a href="https://mp.weixin.qq.com/" target="_blank">https://mp.weixin.qq.com/</a></div>
      <a class="submit-btn" href="https://mp.weixin.qq.com/" target="_blank" >去提交审核</a>
    </el-row>
  </el-container>
</template>

<script>
  import QRCode from 'qrcodejs2' // 引入qrcode
  export default {
    data() {
      return {
        loading: false,
        token: '',
        isSendRequest: 0,
        currentStep: 1,
        maxStep: 3,
        uuid: '', // 用户uuid
        ticket: '', // 凭证码
        testQrCode: '', // 体验二维码
        loginQrCode: '', // 登陆二维码
        json_content: [], // 跳转小程序appid,注意前台传过来json_content是数组['appid1','appid2']
        rules: { // 约束
          version: [{
            required: true,
            message: '必须填写版本号',
            trigger: 'blur'
          }, ],
          desc: [{
            required: true,
            message: '必须描述信息',
            trigger: 'blur'
          }, ],
        },
        ruleForm: {
          version: '', // 版本号
          desc: '', // 描述
        }
      };
    },
    destroyed: function() {
      this.isSendRequest = 0;
    },
    watch: {
      ruleForm: {
        handler: function(val, oVal) {
          let _appidText = val.appidText;
          if (_appidText) {
            let _appidArr = _appidText.split("\n");
            if (_appidArr.length > 10) {
              this.$message({
                message: ' 最多只可添加10个',
                type: 'warning'
              });
              let temp = [];
              for (let i = 0; i < 10; i++) {
                temp[i] = _appidArr[i];
              }
              this.json_content = temp;
              return false;
            }

            this.json_content = _appidArr;
          }
        },
        deep: true
      }
    },
    methods: {
      /**
       * 上一步
       */
      prevStep: function() {
        --this.currentStep;
      },
      /**
       * 下一步
       */
      nextStep: function() {
        if (this.currentStep >= this.maxStep) {
          this.currentStep = this.maxStep;
          return;
        }
        ++this.currentStep;
      },
      /**
       * 获取登陆二维码
       */
      getLoginQrCode: function() {
        let _this = this;
        if (_this.ruleForm.desc == "" || _this.ruleForm.version == "") {
          _this.$message({
            showClose: true,
            message: '请填写版本号及描述',
            type: 'warning'
          });
          return false;
        }
        _this.api.systemConfigGetQrCode({
          desc: _this.ruleForm.desc,
          version: _this.ruleForm.version
        }).then(function(res) {
          if (res.code == 1) {
            // _this.uuid = res.data.uuid;
            // _this.loginQrCode = res.data.url;
            _this.token = res.data.token;
            _this.currentStep = 2; //
            _this.qrcode(res.data.url);
            // _this.getTicketByUUID();
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function(err) {
          throw new Error(err);
        });
      },

      qrcode(url) { //生成二维码
        let qrcode = new QRCode('qrcode', {
          width: 200,
          height: 200,
          text: url, // 二维码地址
          colorDark: "#000",
          colorLight: "#fff",
        })
      },
      /**
       * 获取登陆状态获取ticket
       */
      getTicketByUUID: function() {
        let _this = this;
        _this.api.systemConfigGetWxCode({
          uuid: _this.uuid
        }).then(function(res) {
          // -1域名未授权,0请求失败,1等待用户操作,2请求成功
          if (res.code == -1 || res.code == 0 || res.code == 1) {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success'
            });
          }
          if (res.code == 1) {
            setTimeout(function() {
              if (_this.isSendRequest == 0) {
                return;
              }
              _this.getTicketByUUID();
            }, 2000);
          }
          if (res.code == 2) {
            _this.ticket = res.data.ticket;
            _this.nextStep();
          }
        }).catch(function(err) {
          throw new Error(err);
        });
      },
      /**
       * 获取体验二维码
       */
      getTestQrCode: function() {
        let _this = this;
        _this.api.systemConfigGetTestCode({
          ticket: _this.ticket,
          json_content: _this.json_content
        }).then(function(res) {
          if (res.code == 1) {
            let base64Prefix = "data:image/png;base64,";
            _this.testQrCode = base64Prefix + res.data.base64;
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success'
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function(err) {
          throw new Error(err);
        });
      },
      /**
       * 上传
       */
      submitApplet: function(formName) {
        let _this = this;
        _this.loading = true;
            _this.api.systemConfigSubmitApplet({
              token: _this.token
            }).then(function(res) {
              _this.loading = false;
              if (res.code == 1) {
                _this.currentStep = 3;
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'success'
                });
              } else {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'warning'
                });
              }
            }).catch(function(err) {
              throw new Error(err);
            });

      }
    },
    mounted: function() {
      this.isSendRequest = 1;
    },
  }
</script>

<style scoped>
  .submit-btn {
    display: block;
    width: 92px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    background-color: #409EFF;
    text-align: center;
    text-decoration:none;
    font-size: 14px;
    border-radius: 5px;
    margin: 0 auto;
  }
  .qr_code {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
  }
  .qr_code img {
    margin: 30px auto!important;
  }

  .el-container {
    display: block;
    width: 95%;
    margin: 15px 0 15px 30px;
  }

  .el-steps {
    margin: 30px 220px;
  }

  .qrCode {
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto;
  }

  .el-button {
    display: block;
    margin: 50px auto;
  }

  .el-form {
    width: 600px;
    display: block;
    margin: 0 auto;
  }

  .el-tag {
    margin: 5px;
  }
</style>
